<template>
	<div style="width: 1600px; height: 150px; display: flex; background-color: #EFF1F4;">
		<div class="split"></div>
		<div class="header-flex">
			<div class="ant-statistic-title">主机数量</div>
			<div class="ant-statistic-content">{{ host_count }} 台</div>
		</div>

		<div class="split"></div>
		<div class="header-flex">
			<div class="ant-statistic-title">用户数量</div>
			<div class="ant-statistic-content">多个个</div>
		</div>

		<div class="split"></div>
		<div class="header-flex">
			<div class="ant-statistic-title">任务执行数量</div>
			<div class="ant-statistic-content">多个个</div>
		</div>

		<div class="split"></div>
		<div class="header-flex">
			<div class="ant-statistic-title">任务执行数量</div>
			<div class="ant-statistic-content">多个个</div>
		</div>
	</div>

	<div class="ant-card ant-card-bordered">
		<div class="ant-card-head">
			<div class="ant-card-head-wrapper">
				<div class="ant-card-head-title">报警趋势</div>
			</div>
		</div>
	</div>

</template>

<script>
	import axios from "axios"
	import * as echarts from 'echarts';
	import {
		ref
	} from 'vue';


	export default {
		data() {
			return {
				host_count: "",
			}
		},
		name: "ShowCenter",
		mounted() {
			this.host_dashboard()
		},
		methods: {
			host_dashboard() {
				axios.post("http://api.xman.com:9090/host/hostdashboard", {}).then((res) => {
					console.log(res.data.host_count)
					this.host_count = res.data.host_count;
				}).catch((err) => {
					console.log("err:::", err)
				})
			},
		},
	}
</script>

<style scoped>
	.header-flex {
		height: 100px;
		width: 580px;
		background-color: #FFFFFF;
		margin-top: 20px;
	}

	.split {
		height: 100%;
		width: 35px;
	}

	.ant-statistic-title {
		margin-bottom: 4px;
		color: rgba(0, 0, 0, .45);
		font-size: 14px;
		margin-top: 20px;
		margin-right: 250px;
	}

	.ant-statistic-content {
		color: rgba(0, 0, 0, .85);
		font-size: 24px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		margin-right: 250px;
	}

	.ant-card-bordered {
		border: 1px solid #f0f0f0;
	}

	.ant-card {
		width: 1580px;
		height: 400px;
		margin-left: 22px;
		box-sizing: border-box;
		color: rgba(0, 0, 0, .85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		-webkit-font-feature-settings: "tnum", "tnum";
		font-feature-settings: "tnum", "tnum";
		position: relative;
		background: #fff;
		border-radius: 2px;
	}

	.ant-card-head {
		min-height: 48px;
		color: rgba(0, 0, 0, .85);
		font-weight: 500;
		font-size: 16px;
		background: transparent;
		border-bottom: 1px solid #f0f0f0;
		border-radius: 2px 2px 0 0;
	}

	.ant-card-head-wrapper {
		display: flex;
		align-items: center;
	}

	.ant-card-head-title {
		display: inline-block;
		margin-left: 16px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
	}
</style>